<template>
    <HalfModal
        title="更换配送方式"
        class="tech-delivery-type"
        :show="visiable"
        :haveBorder="true"
        :mode="mode"
        :styleMode="styleMode"
        :theme="theme"
        @close="close"
    >
        <div :class="`delivery-type-info ${mode}`">
            <div class="express-item" v-if="havePickUp" @click="() => chooseDeliveryType(type.SELF_PICK_UP)">
                <div class="express-name" :style="`${deliveryType === type.SELF_PICK_UP ? fontColor : ''}`">门店自提</div>
                <div class="express-check">
                    <MiniIcon v-if="deliveryType === type.SELF_PICK_UP" name="checkfill" :size="20" />
                </div>
            </div>
            <div class="express-item" v-if="haveExpress" @click="() => chooseDeliveryType(type.EXPRESS)">
                <div class="express-name" :style="`${deliveryType === type.EXPRESS ? fontColor : ''}`">{{ deliveryText[type.EXPRESS] }}</div>
                <div class="express-check">
                    <MiniIcon v-if="deliveryType === type.EXPRESS" name="checkfill" :size="20" />
                </div>
            </div>
            <div class="express-item" v-if="haveCity" @click="() => chooseDeliveryType(type.CITY_EXPRESS)">
                <div class="express-name" :style="`${deliveryType === type.CITY_EXPRESS ? fontColor : ''}`">{{ deliveryText[type.CITY_EXPRESS] }}</div>
                <div class="express-check">
                    <!-- <div v-if="isCityBeyond" class="express-tip">超出配送范围</div> -->
                    <MiniIcon v-if="deliveryType === type.CITY_EXPRESS" name="checkfill" :size="20" />
                </div>
            </div>
        </div>
    </HalfModal>
</template>

<script>
import { Popup, Button } from 'vant';
import { MiniIcon } from '@components/base';
import { HalfModal } from '@components/shop';
import { DELIVERY_TYPE, DELIVERY_TYPE_TEXT } from '@constants/shop';
import logger from '@common/logger';

import ModeMixin from '@common/mixin';
export default {
    name: 'ReviewDeliveryType', // 快递详情
    mixins: [ModeMixin],
    components: {
        Popup,
        Button,
        MiniIcon,
        HalfModal,
    },
    props: {
        deliveryType: Number,
        havePickUp: Boolean,
        haveExpress: Boolean,
        haveCity: Boolean,
        isCityBeyond: Boolean,
    },
    data() {
        return {
            visiable: false,
            type: DELIVERY_TYPE,
            deliveryText: DELIVERY_TYPE_TEXT,
        };
    },
    methods: {
        show() {
            this.visiable = true;
        },
        close() {
            this.visiable = false;
        },
        chooseDeliveryType(type) {
            this.close();
            logger.info('Review => 修改配送方式', type);
            this.$emit('ensure', type);
        },
    },
};
</script>

<style lang="less">
.tech-delivery-type {
    .delivery-type-info {
        height: 305px;
        .scroll-y();
        .p-t(0);
        &.black {
            .express-item {
                .express-name {
                    color: @black-title-color;
                }
            }
        }
        .express-item {
            .p-h(@shop-gap-md);
            height: 48px;
            .flex();
            align-items: center;
            justify-content: space-between;
            .express-name {
                font-size: @shop-font-size-md;
                font-weight: 500;
                color: @text-color;
                .flex();
                align-items: center;
                .mini-icon {
                    .m-r(3);
                }
            }
            .express-tip {
                color: @tip-color;
                font-size: @shop-font-size;
                .m-t(@gap-sm);
            }
        }
    }
}
</style>
